<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>主页-智能家居系统</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"/>
    <style type="text/css">
        body {
            padding-top: 50px;
            padding-bottom: 40px;
            padding-left: 70px;
            padding-right: 70px;
            color: #5a5a5a;
        }

        /* 轮播广告 */

        .carousel {
            height: 350px;
            margin-bottom: 60px;
        }

        .carousel .item {
            height: 350px;
            background-color: #000;
        }

        .carousel .item img {
            width: 100%;
        }

        .carousel-caption {
            z-index: 10;
        }

        .carousel-caption p {
            margin-bottom: 20px;
            font-size: 20px;
            line-height: 1.8;
        }

        /*调整圆角图片大小*/
        .img-circle {
            width: 250px;
        }

        /* 简要功能 */

        .summary {
            padding-right: 15px;
            padding-left: 15px;
        }

        .summary .col-md-4 {
            margin-bottom: 20px;
            text-align: center;
        }
        /*我的生活*/
        .life-divider  {
            margin: 40px 0;
        }
        .feature {
            padding: 30px 0;
        }

        .life-heading {
            font-size: 50px;
            color: #2a6496;
        }

        .life-heading .text-muted {
            font-size: 28px;
        }

        /* 响应式布局 */

        @media (max-width: 768px) {

            .summary {
                padding-right: 3px;
                padding-left: 3px;
            }

            .carousel {
                height: 300px;
                margin-bottom: 30px;
            }

            .carousel .item {
                height: 300px;
            }

            .carousel img {
                min-height: 300px;
            }

            .carousel-caption p {
                font-size: 16px;
                line-height: 1.4;
            }
        }

        @media (min-width: 992px) {
            .life-heading {
                margin-top: 120px;
            }
        }
        /*版权信息*/
        #copyright {
            height: 100px;
            color: #524f4f;
            text-align: center;
            font-size: 10px;
            padding-top: 6px;
        }
    </style>
</head>
<body>

<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="menu-nav">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">智能家居系统</a>
        </div>
        <div class="navbar-collapse collapse" id="navbar-collapse">
            <ul class="nav navbar-nav navbar">
                <li class="active"><a href="#ad-carousel">首页</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">我的生活<span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#life-tab" data-tab="tab-gateway">我的网关</a></li>
                        <li><a href="#life-tab" data-tab="tab-state">状态信息</a></li>
                        <li><a href="#life-tab" data-tab="tab-info">家居控制</a></li>
                        <li><a href="#life-tab" data-tab="tab-record">控制记录</a></li>
                    </ul>
                </li>
                <li><a href="#" data-toggle="modal" data-target="#about-modal">关于我们</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a><span th:text="${session.uemail}"></span></a></li>
                <li><a href="javascript:;" id="signout"><span class="glyphicon glyphicon-log-out"></span> 注销</a></li>
            </ul>
        </div>
    </div>
</div>


<div id="ad-carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#ad-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#ad-carousel" data-slide-to="1"></li>
        <li data-target="#ad-carousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img th:src="@{/pc/img/1.jpg}" alt="1 slide"/>

            <div class="container">
                <div class="carousel-caption">
                    <h4>品咖啡是为了它的香醇而不是苦涩。</h4>
                </div>
            </div>
        </div>
        <div class="item">
            <img th:src="@{/pc/img/2.jpg}" alt="2 slide"/>

            <div class="container">
                <div class="carousel-caption">
                    <h4>已然无关痛痒，又怎骤然心酸？</h4>
                </div>
            </div>
        </div>
        <div class="item">
            <img th:src="@{/pc/img/3.jpg}" alt="3 slide"/>

            <div class="container">
                <div class="carousel-caption">
                    <h4>我什么也没忘，但有些事只适合收藏。</h4>
                </div>
            </div>
        </div>

    </div>
    <a class="left carousel-control" href="#ad-carousel" data-slide="prev"><span
            class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#ad-carousel" data-slide="next"><span
            class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<div class="container summary">

    <hr class="life-divider"/>

    <ul class="nav nav-tabs" role="tablist" id="life-tab">
        <li class="active"><a href="#tab-gateway" role="tab" data-toggle="tab">我的网关</a></li>
        <li><a href="#tab-state" role="tab" data-toggle="tab">状态信息</a></li>
        <li><a href="#tab-info" role="tab" data-toggle="tab">家居控制</a></li>
        <li><a href="#tab-record" role="tab" data-toggle="tab">控制记录</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="tab-gateway">
            <div class="row feature">
                <div class="col-md-7">
                    <h4> 介绍内容</h4>
                    <form role="form">
                        <div class="form-group">
                            <table class="table table-hover">
                                <caption>未选择网关</caption>
                                <thead>
                                <tr>
                                    <th>拥有的网关代号</th>
                                    <th>状态</th>
                                </tr>
                                </thead>
                                <tbody id="gatewaytbody">
                                </tbody>
                            </table>
                        </div>
                    </form>
                </div>
                <div class="col-md-5">
                    <img class="feature-image img-responsive" th:src="@{/pc/img/8.jpg}"
                         alt="gateway"/>
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-state">
            <div class="row feature">
                <div class="col-md-5">
                    <img class="feature-image img-responsive" th:src="@{/pc/img/9.jpg}"
                         alt="state"/>
                </div>
                <div class="col-md-7">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <div class="col-sm-10">
                                <h3>温度 ： <span id="temp" class="label label-default">0</span></h3>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-10">
                                <h3>湿度 ： <span id="humi" class="label label-default">0</span></h3>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-10">
                                <h3>亮度 ： <span id="light" class="label label-default">0</span></h3>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-info">
            <div class="row feature">
                <div class="col-md-7">
                    <h4> 点击你所需要的：</h4>
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button id="lledon" type="button" class="btn btn-default">打开客厅灯</button>
                                <button id="bledon" type="button" class="btn btn-default">打开卧室灯</button>
                            </div>
                            <div class="col-sm-offset-2 col-sm-10">
                                <button id="lledoff" type="button" class="btn btn-default">关闭客厅灯</button>
                                <button id="bledoff" type="button" class="btn btn-default">关闭卧室灯</button>
                            </div>
                        </div>
                    </form>

                </div>
                <div class="col-md-5">
                    <img class="feature-image img-responsive" th:src="@{/pc/img/10.jpg}"
                         alt="info"/>
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-record">
            <div class="row feature">
                <div class="col-md-5">
                    <img class="feature-image img-responsive" th:src="@{/pc/img/11.jpg}"
                         alt="record"/>
                </div>
                <div class="col-md-7">
                    <form role="form">
                        <div class="form-group">
                            <table class="table table-bordered">
                                <caption>操作记录</caption>
                                <thead>
                                <tr>
                                    <th>设备</th>
                                    <th>时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>...</td>
                                    <td>...</td>
                                    <td>...</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="about-modal" tabindex="-1" role="dialog" aria-labelledby="modal-label"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title" id="modal-label">关于我们</h4>
                </div>
                <div class="modal-body">
                    <p>
                        计算机科学与工程学院<br/>
                        物联网工程2014-1<br/>
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">已了解</button>
                </div>
            </div>
        </div>
    </div>
</div>

<hr class="life-divider"/>
<footer id="copyright" style="text-align:center">
    <p style="margin-top:10px">2017@SmartLife. All Rights Reserved. </p>
    <p> 联系方式：TEL:123456    邮箱：123456@sina.cn </p>
    <p class="pull-right"><a href="#top">回到顶部</a></p>
</footer>

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="@{/pc/js/index.js}"></script>
<script>
    $(function () {
        $('#ad-carousel').carousel();
        $('#menu-nav .navbar-collapse a').click(function (e) {
            var href = $(this).attr('href');
            var tabId = $(this).attr('data-tab');
            if ('#' !== href) {
                e.preventDefault();
                $(document).scrollTop($(href).offset().top - 50);
                if (tabId) {
                    $('#life-tab a[href=#' + tabId + ']').tab('show');
                }
            }
        });
    });
</script>
</body>
</html>